<template>
  <div class="pro-box" v-if="detailData.proInfo">
    <!-- 1.0  项目介绍 -->
    <h3>
      <a :href="detailData.proInfo.proWebUrl">{{
        detailData.proInfo.proName
      }}</a>
    </h3>
    <ul class="detail-info">
      <li>
        <span>项目难度：</span>
        <p>
          <el-rate v-model="detailData.proInfo.proNandu"></el-rate>
        </p>
      </li>
      <li>
        <span>
          <i class="el-icon-thumb"></i>
        </span>
        <p>({{ detailData.proInfo.zanNum }})</p>
        <span>
          <i class="el-icon-view"></i>
        </span>
        <p>({{ detailData.proInfo.readNum }})</p>
        <span>
          <i class="el-icon-chat-dot-round"></i>
        </span>
        <p>({{ detailData.proInfo.pingjiaNum }})</p>
      </li>
      <li style="width: 100%; flex-direction: column;">
        <span style="margin-bottom: 15px;align-self: flex-start;"
          >项目介绍：</span
        >
        <p style="text-indent: 2em; line-height: 26px;">
          {{ detailData.proInfo.proZaiyao }}
        </p>
      </li>
    </ul>

    <!-- 1.0 视频界面 -->
    <div class="video">
      <video controls :src="detailData.proLongDetail.videoUrlStr"></video>
    </div>

    <!-- 2.0 项目介绍 -->
    <div class="rates">
      <h3>学员评价</h3>
      <div class="comment-box">
        <div id="SOHUCS" :sid="'ddp-blog-' + $id"></div>
      </div>

      <!-- 2.2 评价列表 -->
      <!-- <ul>
        <li>
          <div>2021-05-27 林雪峰 说：</div>
          <p>“ 奥术大师大撒 ”</p>
        </li>
      </ul> -->
    </div>
  </div>
</template>

<script>
import { getDetail } from '@/api/project.js'
export default {
  data() {
    return {
      detailData: {}
    }
  },
  created() {
    this.getDatas()
  },
  updated() {
    this.$nextTick(() => {
      console.log(document.querySelector('#SOHUCS'))
      const appid = 'cyuR14hpL'
      const conf = 'prod_f15da8238979ec68a7bea3f79a8cfb74'
      this.loadJs('https://changyan.sohu.com/upload/changyan.js', function() {
        window.changyan &&
          window.changyan.api.config({ appid: appid, conf: conf })
      })
    })
  },
  methods: {
    async getDatas() {
      const { code, data } = await getDetail(this.$id)
      console.log(data)
      if (code === 200) {
        this.detailData = data
      }
    },
    loadJs(url, cb) {
      try {
        const c =
          document.getElementsByTagName('head')[0] ||
          document.head ||
          document.documentElement
        const b = document.createElement('script')
        b.setAttribute('type', 'text/javascript')
        b.setAttribute('charset', 'UTF-8')
        b.setAttribute('src', url)
        b.setAttribute('id', 'changyan_pc_js')
        if (window.attachEvent) {
          b.onreadystatechange = function() {
            const e = b.readyState
            if (e === 'loaded' || e === 'complete') {
              b.onreadystatechange = null
              cb && cb()
            }
          }
        } else {
          if (cb) {
            b.onload = cb
          }
        }
        c.appendChild(b)
      } catch (error) {
        cb && cb()
      }
    }
  },
  computed: {
    $id() {
      return this.$route.params.id
    }
  },
  beforeDestroy() {
    try {
      const removeRep = /^http(s)?\:\/\/changyan\./
      const $head =
        document.getElementsByTagName('head')[0] ||
        document.head ||
        document.documentElement
      const $script = $head.querySelectorAll('script')
      $script.forEach((item, index) => {
        const src = item.getAttribute('src')
        if (src && removeRep.test(src)) {
          $head.removeChild(item)
        }
      })
      for (const key in window) {
        if (/^(changyan(\d)?|cyan)/.test(key)) {
          window[key] = undefined
        }
      }
    } catch (error) {}
  }
}
</script>

<style lang="less" scoped>
.pro-box {
  width: 930px;
  max-width: 1120px;
  margin: 0 auto;
}

.video {
  padding: 10px 0;
  text-align: center;
  video {
    width: 80%;
  }
}

h3 {
  font-size: 24px;
  margin: 30px 0;
  a {
    text-decoration: none;
    color: #f40;
  }
}

.detail-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  li {
    width: 60%;
    color: #333;
    display: flex;
    margin-bottom: 15px;
    align-items: center;

    span {
      font-size: 16px;
      color: cornflowerblue;
      margin-right: 6px;
    }

    &:nth-of-type(2n-1) {
      width: 30%;
    }
    p {
      margin-right: 15px;
      color: #666;
    }
  }
}

.rates {
  padding-bottom: 200px;
  h3 {
    position: relative;
    margin: 30px 0 15px;
    text-indent: 8px;
    font-size: 22px;
    color: #333;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      width: 3px;
      height: 22px;
      background-color: #03a9f4;
    }
  }

  li {
    padding: 10px;
    margin-bottom: 10px;
    div {
      font-size: 14px;
      color: #666;
      border-bottom: 1px solid #ddd;
      margin-bottom: 10px;
      padding-bottom: 10px;
    }
    p {
      font-size: 16px;
      font-style: italic;
      text-indent: 2em;
      color: #333;
    }
  }
}
</style>
